<template>
    <div class="app-container" >
      <div class="background">
        <img :src="readInfo.readImage" width="100%" height="100%" alt="" />
      </div>
      <div class="left-content">
        <el-col :span="4">
          <el-avatar :size="50" :src="readInfo.readHeadImage"></el-avatar>
        </el-col>
        <el-col :span="20">
          <h2>{{readInfo.readName}}</h2>
        </el-col>
        <el-col :span="24">
          <video-player class="video-player vjs-custom-skin"
                        ref="videoPlayer"
                        :playsinline="true"
                        :options="playerOptions">
          </video-player>
        </el-col>
      </div>
      <div class="right-content">
        <br/><br/>
        <div v-html="readInfo.content" class="text">
        </div>
        <Icon type="md-heart-outline" v-if="readInfo.love==false" @click="addLove()" style="color: red;font-size: 20px"/>
        <Icon type="md-heart" v-if="readInfo.love==true" @click="addLove()" style="color: red;font-size: 20px"/>
        <i v-if="readInfo.collection==false" class="el-icon-star-off" @click="addCollection()" style="color: red;font-size: 20px"></i>
        <i v-if="readInfo.collection==true" class="el-icon-star-on" @click="addCollection()" style="color: red;font-size: 20px"></i>
        <el-col :span="35">
        <el-tag
          v-for="item in readInfo.tagDTOList"
          :key="item.label"
          :type="item.type"
          effect="dark">
          {{ item.label }}
        </el-tag>
        </el-col>
      </div>
      <comment :id="this.$route.query.readId" :type="1"></comment>
    </div>
</template>

<script>

import {findDetailRead, loveRead, collectionRead} from "@/api/read";
import comment from "@/components/soulListen/comment";

export default {
  name: "detailSoulSharing",
  components: {comment},
  data() {
    return {
      readInfo: undefined,
      playerOptions: undefined
    }
  },
  created() {
    findDetailRead(this.$route.query.readId).then(res =>{
      this.readInfo = res.body.data
      this.addPlayerOptions()
    })
    this.flushComment()
  },
  methods: {
    addPlayerOptions() {
      this.playerOptions = {
        //播放速度
        playbackRates: [0.5, 1.0, 1.5, 2.0],
        //如果true,浏览器准备好时开始回放。
        autoplay: false,
        // 默认情况下将会消除任何音频。
        muted: false,
        // 导致视频一结束就重新开始。
        loop: false,
        // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        preload: 'auto',
        language: 'zh-CN',
        // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        aspectRatio: '16:9',
        // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        fluid: true,
        sources: [{
          //类型
          type: "video/mp4",
          //url地址
          src: this.readInfo.readUrl
        }],
        //你的封面地址
        poster: '',
        //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        notSupportedMessage: '此视频暂无法播放，请稍后再试',
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          //全屏按钮
          fullscreenToggle: true
        }
      }
    },
    addLove() {
      loveRead(this.$route.query.readId).then(res => {
        if (res.body.data)
          this.readInfo.love = !this.readInfo.love
      })
    },
    addCollection() {
      collectionRead(this.$route.query.readId).then(res => {
        if (res.body.data)
          this.readInfo.collection = !this.readInfo.collection
      })
    }
  }
}
</script>

<style scoped>
.app-container{
  height: 100%;
}
/*left*/
.left-content{
  height: 100%;
  width: 400px;
  float: left;
}
.left-content .left-content-title{
  width: 300px;
  display: block;
}
.left-content .left-content-text{
  width: 550px;
  position: relative;
  padding-top: 20px;
}
.left-content .left-content-text .button{
  position: absolute;
  top: 470px;
  left: 470px;
}
.left-content .left-content-text .x-button{
  position: absolute;
  top: 470px;
  left: 370px;
}
/*right*/
.right-content{
  width: 300px;
  float: left;
  height: 100%;
  padding-left: 50px;
}

.abow_dialog {
  display: flex;
  justify-content: center;
  align-items: Center;
  overflow: hidden;
}
.el-dialog {
  margin: 0 auto !important;
  height: 100%;
  overflow: hidden;
}
.el-dialog__body {
  position: absolute;
  left: 20px;
  top: 10px;
  bottom: 72px;
  right: 0;
  padding: 0;
  z-index: 1;
  /*overflow: hidden;*/
  overflow-y: auto;
  overflow-x: auto;
}
.customerSearch{
  position: sticky;
  top: 0;
  z-index: 3;
}
.el-dialog__footer{
  position: absolute;
  left: 0;
  bottom: 40px;
  right: 54px;
  padding: 0;
  z-index: 2;
}

.background {
  width:100%;
  height:100%;  /**宽高100%是为了图片铺满屏幕 **/
  z-index:-1;
  position: absolute;
}
.content {
  z-index:1;
  position: absolute;
}
.text {
  margin:0px;
  padding:0px;
  font:12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif;
  font-size:20px;
  height:36px;
  color: azure;
}
</style>

